class Cart{
    constructor(){
        // 从购物车中取出数据
        this.list =JSON.parse(localStorage.getItem('cart')) || []
        // 获取元素
        this.cartTable = document.querySelector('.cartTable')
        this.tbody = document.querySelector('tbody')
        this.totalNum =document.querySelector('.totalNum')
        this.money =document.querySelector('.money')
        this.selectAll =document.querySelector('.selectAll')
        this.NUM=document.querySelector('.NUM')
        // this.pan=document.querySelector('.Go')
        // console.log(this.pan)
        this.init()

    }
    init(){
        this.render()
        this.bindHtml()
        this.total()

    }
    // 判断购物车有无数据
    render(){        
        this.tbody.innerHTML=``
        this.list.forEach(item=>{
            this.tbody.innerHTML +=`
            <tr>
            <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}></td>
            <td>
                <img src="${item.img_small_logo}" >
                <span class="hide">${item.title}</span>
            </td>
            <td>
                <span class="sub" data-id="${item.goods_id}">-</span>
                <input type="text" value="${item.cart_number}"/>
                <span class="add" data-id="${item.goods_id}">+</span>
            </td>
            <td><span class="price">￥${item.price*item.cart_number}</span></td>
            <td><span class="del"  data-id="${item.goods_id}">删除</span></td>
         </tr>
            `
        })

        }

bindHtml(){
    // this.cartTable.onclick =(e)=>{
    //     let target = e.target || e.srcElement
    //     // 全选
    //     if(target.className == 'selectAll'){
    //     }
    //     alert('1123')
    // }
    $('.cartTable').click(e=>{
        let target = e.target || e.srcElement
        // 全选
        if(target.className =='selectAll'){
            let type = target.checked
            this.list.forEach(item=>{
                item.is_select = type
                // alert('122')
            })
            this.render()
            this.total()

        }
        // 单选
        if(target.className =='select'){
           let id =target.dataset.id - 0
           let goods = this.list.find(item=>{return item.goods_id == id})
           goods.is_select = !goods.is_select
           this.render()
           this.total()
        }
        // 点击商品数量增加
        if(target.className == 'add'){
            let id =target.dataset.id - 0
            let goods =this.list.find(item=>{return item.goods_id == id})
            if(goods.cart_number==10){
                alert('亲，只能购买这么多哦!')
                return false
            }
            goods.cart_number++
            this.render()
            this.total()
            // alert('12')
        }
        // 点击商品数量减少
        if(target.className == 'sub'){
            let id =target.dataset.id - 0
            let goods = this.list.find(item=>{return item.goods_id == id})
            if(goods.cart_number == 1){
                return false
            }
            goods.cart_number--
            this.render()
            this.total()
        }
        // 点击删除
        if(target.className == 'del'){
            let id = target.dataset.id - 0
            let index = this.list.findIndex(item=>{return item.goods_id == id})
            this.list.splice(index, 1)
            this.render()
            this.total()
            if(!this.list.length){
                this.selectAll.checked = false
            }
        }
        // 

    })
}
total(){
    let num=0
    let price = 0
    this.list.forEach(item=>{
        if(item.is_select == true){
            num +=item.cart_number
            price +=item.cart_number*item.price
            let res = this.list.every(item=>{return item.is_select == true})
                if(res){
                    this.selectAll.checked = true
                }else{
                    this.selectAll.checked = false
                }
        }
    })
    this.totalNum.innerHTML = num
    this.money.innerHTML=price
    this.NUM.innerHTML=num
}
// 
    
}
new Cart()